// wms待派单
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, Pagination, Space, Modal, Row, Col, Radio, Select } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import axios from 'axios';
import { constants } from 'buffer';
import { useEffect, useState, FC, ReactNode } from 'react';
import { addController, getWms, updateWms } from '../../../../utils/zhy';
import './index.css'
interface DataType {
  key: string;
  wwlId: number;//序列号
  materialsCode: string;//物料编码
  materialsName: string;//物料描述
  supNumber: number;//供方代号
  userName: string;//供方名称
  wwlNumber: string;//批次
  wwlCount: number;//数量
  wwlMlot: string;//MLOT
  wwlLpn: number;//LPN
  wwlOrdernumber: string;//订单号
  wwlReceNum: string;//收货单号
  wwlAotuReason: string;//自动派单失败原因
  wwlReceTime: string;//收货日期
  wwlUseTime: string;//预计使用时间
}
const Wms: FC = () => {
  const [data, setData] = useState<DataType[]>()
  // 获取数据
  useEffect(() => {
    getWms().then((res) => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        console.log("成功请求数据！");
        setData(res.data.data.listWmsWaitingList)
        console.log(res.data.data.listWmsWaitingList);
      } else {
        console.log("请求数据失败！");
      }
    }).catch((error) => {
      console.log(error);
    })
  }, [])
  // 对话弹框
  // 物料异常恢复
  const showModal = () => {
    setIsModalVisible(true);
  };
  // 派单
  const redact = () => {
    setModalVisible(true);
  }
  // ----------------------------
  // 物料异常恢复
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [inteN, seItnteN] = useState<number>();
  const [LPN, setLPN] = useState<string>()
  const lpn = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

      setLPN(e.target.value)
      seItnteN(parseInt(e.target.value))
  };
  const handleOk = (LPN: any) => {
    axios({
      url: `/api3/material/selectWmsWaitingList`,
      params: { wwlLpn: LPN }
    }).then(res => {
      console.log(LPN);
      // setData(res.data.data.listSupplier)
      updateWms(LPN).then(res => {
        console.log('我成功了');
      }).catch(res => {
        console.log('我失败了');

      })


    }).catch(error => console.log(error)
    )
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //派单
  const [ModalVisible, setModalVisible] = useState(false);
  const handleOk1 = () => {
    setModalVisible(false);
  };
  const handleCancel1 = () => {
    setModalVisible(false);
  };
  // 查询
  const [materialsCode1, setSearchid] = useState<string>()
  const [supNumber1, setSearchgroup] = useState<string>()
  const [tobReceNum1, setSearchgroup1] = useState<string>()
  const onsearchid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchid(e.target.value)
  };
  const onsearchid1 = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchgroup(e.target.value)
  };
  const onsearchid2 = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchgroup1(e.target.value)
  };
  const selectname = () => {
    console.log(setSearchid, setSearchgroup, setSearchgroup1);
    axios({
      url: `/api3/material/selectWmsWaitingList`,
      params: { materialsCode: materialsCode1, supNumber: supNumber1, wwlReceNum: tobReceNum1 }
    }).then(res => {
      setData(res.data.data.listWmsWaitingList)
    }).catch(error => console.log(error)
    )
  }
  // 重置
  const resetit = () => {
    setSearchid('')
    setSearchgroup('')
    setSearchgroup1('')
    getWms().then(res => {
      setData(res.data.data.listWmsWaitingList)
    }).catch(error => console.log(error)
    )
  }

  // --------------------
  const [form] = Form.useForm();
  //table的相关数据，函数
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'wwlId',
      align: 'center',
      fixed: 'left',
      width: 100,

    },
    {
      title: '操作',
      align: 'center',
      dataIndex: 'address',
      fixed: 'left',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={redact}>派单</a>
          <span>无纸化</span>
        </Space>
      )
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
      align: 'center',
    },
    {
      title: '物料描述',
      dataIndex: 'materialsName',
      align: 'center',

    },
    {
      title: '供方代号',
      dataIndex: 'supNumber',
      align: 'center',

    },

    {
      title: '供方名称',
      dataIndex: 'userName',
      align: 'center',

    },
    {
      title: '批次',
      dataIndex: 'wwlNumber',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'wwlCount',
      align: 'center',
    },
    {
      title: 'MLOT',
      dataIndex: 'wwlMlot',
      align: 'center',
      width: 250
    },
    {
      title: 'LPN',
      dataIndex: 'wwlLpn',
      align: 'center',
    },
    {
      title: '订单号',
      dataIndex: 'wwlOrdernumber',
      align: 'center',
    },
    {
      title: '收货单号',
      dataIndex: 'wwlReceNum',
      align: 'center',
    },
    {
      title: '自动派单失败原因',
      dataIndex: 'wwlAotuReason',
      align: 'center',
    },
    {
      title: '收货日期',
      dataIndex: 'wwlReceTime',
      align: 'center',
      width: 250
    },
    {
      title: '预计使用时间',
      dataIndex: 'wwlUseTime',
      align: 'center',
      width: 250
    },
  ];
  const { Option } = Select;
  // const data: DataType[] = [];



  const { TextArea } = Input
  return (<div >

    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item  >物料编号:<Input className='inp' placeholder="物料编号" value={materialsCode1} allowClear onChange={onsearchid} /></Form.Item>
      <Form.Item >供货代码:<Input className='inp' placeholder="供货代码" value={supNumber1} allowClear onChange={onsearchid1} /></Form.Item>
      <Form.Item >收货编号:<Input className='inp' placeholder="收货编号" value={tobReceNum1} allowClear onChange={onsearchid2} /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resetit}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.25rem', borderRadius: '5px' }} type="primary" onClick={showModal}>物料异常恢复</Button></div>

    {/* // 表格 */}
    <Table pagination={{ showQuickJumper: true, defaultPageSize: 3, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 2500 }} columns={columns} dataSource={data} rowKey={(record) => { return record.wwlId }} />
    {/* ------------------------------------------ */}
    <Modal title="重置收货编码" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form>
        <Form.Item label="需重置的LPN号" name={'wwlLpn'} rules={[{ required: true, message: '请输入!' }]}>
          <Input placeholder="需重置的LPN号" value={LPN} allowClear onChange={lpn} />
        </Form.Item>
      </Form>
    </Modal>
    {/* 派单 */}
    <Modal width='800px' title="零星物料派单编辑" visible={ModalVisible} onOk={handleOk1} onCancel={handleCancel1}  >
      <Form >
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="物料编码：" name={'materialsCode'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料名称：" name={'materialsName'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="厂家MLOT:" name={''} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="物料LPN:" name={''} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="供方代号：" name={'supplier_code'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="供方简称：" name={'supplier_name'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="定点物料："
              name={"fixed_point"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='是'>是</Radio>
                <Radio value='否'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item
              label=" 无纸化派单:"
              name={"radiogroup"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='是'>是</Radio>
                <Radio value='否'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="订单号：" name={'order_number'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="收货单号：" name={'receipt_no'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item label="批次：" name={'batch'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="数量：" name={'quantity'} rules={[{ required: true, message: '请输入!' }]}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='10'>
            <Form.Item
              label="物料检验员："
              name={"inspector"}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Select
                defaultValue="检查1"
                style={{ width: 120 }}
              >
                <Option value="检查1">检查1</Option>
                <Option value="检查2">检查2</Option>
                <Option value="检查3">检查3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item
              label=" 暂停供货:"
              name={"radiogroup"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='是'>是</Radio>
                <Radio value='否'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around">
          <Col span='12'>
            <Form.Item
              label=" 当天是否有相同物料到货已派单:"
              name={"radiogroup"}
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Radio.Group>
                <Radio value='是'>是</Radio>
                <Radio value='否'>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='6'>
            <Form.Item
              label="涉及化工项目："
              name={"inspector"}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Select
                defaultValue=""
                style={{ width: 80 }}
              >
                <Option value="1">是</Option>
                <Option value="2">否</Option>

              </Select>
            </Form.Item>
          </Col>
          <Col span='6'>
            <Form.Item
              label="是否首批："
              name={"inspector"}
              hasFeedback
              rules={[
                {
                  required: true,
                  message: '请输入!',
                },
              ]}
            >
              <Select
                defaultValue=""
                style={{ width: 80 }}
              >
                <Option value="1">是</Option>
                <Option value="2">否</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="space-around" className='but1'>
          <Col span='24'>
            <Form.Item label="备注：" name={'remarks'} rules={[{ required: true, message: '请输入!' }]}>
              <TextArea />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>);
};

export default Wms
